﻿@import "../variables";

.msacademic .home {

	& > hr														{ border: 0; border-top: 1px solid lighten(@border-base-color, 13%); margin: 40px 0;  }
	& > h2														{ color: @orange-base; .segoeUILight_font_family; font-weight: lighter;  line-height: 1.1; padding-bottom: 25px; 
 																  font-size: 36px; }
	& > h2.fb													{ color: #3b5999; }

	/* Featured items */
	.featured .article-item {

		float: left; position: relative; line-height: 0; display: block; color: white;
	
		.picture img						{ width: 100%; }
		.gradient-mask						{ opacity: 0.55; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
											  -webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-ms-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;transition: all 0.2s ease-out;}
		&:hover .gradient-mask				{ opacity: 0.68;}						
		.data								{ position: absolute; bottom: 0; left: 0; padding: 20px; line-height: normal;  }
		.data h1							{ .segoeUILight_font_family; font-weight: lighter;  line-height: 1.1; padding-bottom: 8px; 
											  text-shadow: 0px 0px 10px #000000; filter: dropshadow(color=#000000, offx=0, offy=0); }
		.data span							{ font-size: 11px; opacity: 0.8; }
		.author-picture						{ position: absolute; top: 15px; right: 15px; background-color: @bg-base; padding: 2px;
											   -webkit-border-radius: 999px; border-radius: 999px; }
		.author-picture img					{ width: 48px; height: 48px; 
											 -webkit-border-radius: 999px; border-radius: 999px; }

		&.num-0								{ margin: 0 16px 15px 0; width: 673px;  }
		&.num-0 h1							{ font-size: 48px; }
		&.num-1,
		&.num-2								{ margin: 0 0 15px 0; width: 450px; height: 13.59375em; overflow: hidden; }
		&.num-1 h1,
		&.num-2 h1							{ font-size: 27px; }
		&.num-5,
		&.num-6,
		&.num-7								{ margin: 0 0 15px 0; width: 370px; }
		&.num-5 h1,
		&.num-6 h1,
		&.num-7 h1							{ font-size: 24px;  }
		&.num-5,
		&.num-6								{ margin-right: 15px; }

		&.num-3								{ margin: 0 15px 15px 0; }
		&.num-4								{ margin-bottom: 15px; }
		&.num-3,
		&.num-4								{ width: 35.15625em;}
		&.num-3 h1,
		&.num-4 h1							{ font-size: 32px; }


		&.num-0 .gradient-mask { background: rgb(255,63,63); /* Old browsers */ background: -moz-linear-gradient(45deg, rgba(255,63,63,1) 4%, rgba(234,144,0,1) 90%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(4%,rgba(255,63,63,1)), color-stop(90%,rgba(234,144,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, rgba(255,63,63,1) 4%,rgba(234,144,0,1) 90%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, rgba(255,63,63,1) 4%,rgba(234,144,0,1) 90%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, rgba(255,63,63,1) 4%,rgba(234,144,0,1) 90%); /* IE10+ */ background: linear-gradient(45deg, rgba(255,63,63,1) 4%,rgba(234,144,0,1) 90%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3f3f', endColorstr='#ea9000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
		&.num-1 .gradient-mask { background: rgb(0,0,0); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 2%, rgba(96,43,43,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(2%,rgba(0,0,0,1)), color-stop(100%,rgba(96,43,43,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 2%,rgba(96,43,43,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 2%,rgba(96,43,43,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 2%,rgba(96,43,43,1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(0,0,0,1) 2%,rgba(96,43,43,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#602b2b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
		&.num-2 .gradient-mask { background: rgb(130,54,129); /* Old browsers */ background: -moz-linear-gradient(top, rgba(130,54,129,1) 24%, rgba(81,34,76,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(24%,rgba(130,54,129,1)), color-stop(100%,rgba(81,34,76,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(130,54,129,1) 24%,rgba(81,34,76,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(130,54,129,1) 24%,rgba(81,34,76,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(130,54,129,1) 24%,rgba(81,34,76,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(130,54,129,1) 24%,rgba(81,34,76,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#823681', endColorstr='#51224c',GradientType=0 ); /* IE6-9 */ }
		&.num-3 .gradient-mask { background: rgb(82,186,13); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(82,186,13,1) 1%, rgba(249,208,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,rgba(82,186,13,1)), color-stop(100%,rgba(249,208,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(82,186,13,1) 1%,rgba(249,208,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(82,186,13,1) 1%,rgba(249,208,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(82,186,13,1) 1%,rgba(249,208,0,1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(82,186,13,1) 1%,rgba(249,208,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52ba0d', endColorstr='#f9d000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
		&.num-4 .gradient-mask { background: rgb(40,143,156); /* Old browsers */ background: -moz-linear-gradient(top, rgba(40,143,156,1) 2%, rgba(7,77,112,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(40,143,156,1)), color-stop(100%,rgba(7,77,112,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(40,143,156,1) 2%,rgba(7,77,112,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(40,143,156,1) 2%,rgba(7,77,112,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(40,143,156,1) 2%,rgba(7,77,112,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(40,143,156,1) 2%,rgba(7,77,112,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#288f9c', endColorstr='#074d70',GradientType=0 ); /* IE6-9 */ }
		&.num-5 .gradient-mask { background: rgb(0,0,0); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 2%, rgba(34,48,56,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(2%,rgba(0,0,0,1)), color-stop(100%,rgba(34,48,56,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 2%,rgba(34,48,56,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 2%,rgba(34,48,56,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 2%,rgba(34,48,56,1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(0,0,0,1) 2%,rgba(34,48,56,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#223038',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
		&.num-6 .gradient-mask { background: rgb(8,33,31); /* Old browsers */ background: -moz-linear-gradient(45deg, rgba(8,33,31,1) 2%, rgba(96,33,6,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(2%,rgba(8,33,31,1)), color-stop(100%,rgba(96,33,6,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, rgba(8,33,31,1) 2%,rgba(96,33,6,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, rgba(8,33,31,1) 2%,rgba(96,33,6,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, rgba(8,33,31,1) 2%,rgba(96,33,6,1) 100%); /* IE10+ */ background: linear-gradient(45deg, rgba(8,33,31,1) 2%,rgba(96,33,6,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08211f', endColorstr='#602106',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
		&.num-7 .gradient-mask { background: rgb(6,96,42); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(6,96,42,1) 0%, rgba(8,33,31,1) 90%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(6,96,42,1)), color-stop(90%,rgba(8,33,31,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(6,96,42,1) 0%,rgba(8,33,31,1) 90%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(6,96,42,1) 0%,rgba(8,33,31,1) 90%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(6,96,42,1) 0%,rgba(8,33,31,1) 90%); /* IE10+ */ background: linear-gradient(135deg, rgba(6,96,42,1) 0%,rgba(8,33,31,1) 90%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#06602a', endColorstr='#08211f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
	}

	/* Latest items */
	.latest	{ 
		hr													{ width: 100%; border: 0; border-top: 1px solid lighten(@border-base-color, 13%); margin: 40px 0; float: left;  }
		.item												{ float: left; width: 370px; margin: 0 15px 0 0; display: block; color: @grey-base;  }
		.item .data											{ padding: 15px; }
		.item .data	p										{ font-size: 18px; }
		.item .data .meta									{ font-size: 12px; color: lighten(@grey-base, 10%); padding: 10px 0; display: block; }
		.item img											{ width: 100%; }
		.item h3											{ .segoeUILight_font_family; font-weight: lighter;  line-height: 1.1; padding-bottom: 8px;  
															  font-size: 24px; color: @grey-base; }
		.item a:hover h3									{ color: @orange-base; }
		
		.item.num-0											{ margin: 35px 0 0 0; width: 100%;  }
		.item.num-0 .picture								{ width: 460px; float:left; }
		.item.num-0 .data									{ float:left; width: 635px; padding-left: 30px; }
		.item.num-0 .data h3								{ font-size: 32px; }
		.item.num-3											{ margin-right: 0; }	
	}
	
	.rss														{ display: block; background-color: @orange-base; color: @bg-base; .background-transition(0.2s);
																  font-size: 32px; .segoeUILight_font_family; padding: 13px 23px; }
	.rss i														{ float: right; }
	.rss:hover													{ background-color: lighten(@orange-base, 10%); }
	/* Social integration */
	.social	{ 
		padding: 20px 0; 

		.fb-like												{ padding-bottom: 20px; }
		.fb-facepile											{ overflow: hidden; height: 150px; }
		.fb-facepile span										{ margin-top: -19px; }
	}
}


/* Responsive design
==================================================== */
@media all and (max-width: 1600px) {
	.msacademic .home > h2										{ font-size: 26px; }

    .msacademic .home .featured .article-item { 
		&.num-0				{ width: 613px; }
		&.num-1,				
		&.num-2				{ width: 350px; height: 12.3375em; }
		&.num-3,
		&.num-4				{ width: 30.1525em; }
		&.num-5,
		&.num-6,
		&.num-7				{ width: 316px; }
		&.num-5 h1,
		&.num-6 h1,
		&.num-7 h1			{ font-size: 18px; line-height: 1.2; }
	}

	.msacademic .home .latest .item	{ 
		width: 316px; 

		&.num-0 .picture				{ width: 360px; }
		&.num-0 .data					{ width: 575px; }
	}

	.msacademic .home .social			{ width: 980px; overflow: hidden; }
}
@media all and (max-width: 1024px) {
	.msacademic .home .rss		{ font-size: 21px; }
    .msacademic .home .featured { float: left; }
    
	.msacademic .home .featured .article-item { 
		.author-picture			{ display: none; }
		
		&.num-0,	
		&.num-1,
		&.num-2,	
		&.num-3,
		&.num-4,	
		&.num-5,
		&.num-6,
		&.num-7					{ width: 48%; height: auto; margin: 1%; float: left; overflow: hidden; }

		&.num-0 h1,
		&.num-1 h1,
		&.num-2 h1,
		&.num-3 h1,
		&.num-4 h1,
		&.num-5 h1,
		&.num-6 h1,
		&.num-7 h1				{ font-size: 21px; line-height: 1.2; }	
	}

	.msacademic .home .latest .item	{ 
		width: 30%; margin: 0 3% 0 0; 
		
		&.num-0 .picture				{ width: 100%; float: left; }
		&.num-0 .data					{ width: 100%; padding: 0; margin-top: 10%; }
		&.num-0 .data	p				{ font-size: 15px; }
	}

	.msacademic .home .social			{ width: 100%; overflow: hidden; }
}
@media all and (max-width: 650px) {
	.msacademic .home .featured .article-item { 
		&.num-0,	
		&.num-1,
		&.num-2,	
		&.num-3,
		&.num-4,	
		&.num-5,
		&.num-6,
		&.num-7					{ width: 98%; }

		&.num-0 h1,
		&.num-1 h1,
		&.num-2 h1,
		&.num-3 h1,
		&.num-4 h1,
		&.num-5 h1,
		&.num-6 h1,
		&.num-7 h1				{ font-size: 24px; }	
	}

	.msacademic .home .latest .item	{ 
		width: 100%; margin: 0 0 4% 0; 
		
		&.num-1 .picture,
		&.num-2 .picture,
		&.num-3 .picture				{ width: 30%; float: left; }
		&.num-1 .data,
		&.num-2 .data,
		&.num-3 .data					{ width: 65%; padding: 0 0 0 5%; float: left;  }
	}
}	